import { YmVideoPlayer } from 'ym-design';

import { useRef, useState } from 'react';

function VideoPlayer() {
  const [videoUrl, setVideoUrl] = useState<string>();
  const inputRef = useRef<HTMLInputElement>(null);
  const [vid, setVid] = useState<string>();

  return (
    <div>
      <div>
        <input
          type="file"
          onChange={(e) => {
            const file = e.target.files?.item(0);
            if (file) {
              setVideoUrl(window.URL.createObjectURL(file));
              e.target.value = '';
            }
          }}
        />
      </div>
      <div>
        <div>v03560g10001ciao1peqibob16p41a80</div>
        <div>v02560g10001chhi0deqiboe1n8j66f0</div>
        <div>v02560g10001ch34g4eqibo3bulcd1n0</div>
      </div>
      <div>
        vid: <input type="text" ref={inputRef} />
        <button
          type="button"
          onClick={() => {
            setVid(inputRef.current?.value);
          }}
        >
          修改
        </button>
      </div>
      <YmVideoPlayer vid={vid} width={200} height={100} />
      <YmVideoPlayer url={videoUrl} width={200} height={100} />
    </div>
  );
}

export default VideoPlayer;
